<template>
  <div
    class="m-wrap"
    :style="{ paddingLeft: paddingWidth + 'px'}"
  >
    <el-breadcrumb
      class="m-breadcrumb"
      separator="/"
    >
      <el-breadcrumb-item>CPA数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>产品数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>数据抓取</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="m-container">
      <el-form
        class="m-filter"
        inline
      >
        <el-form-item>
          <el-date-picker
            size="small"
            v-model="dateValue"
            type="date"
            placeholder="选择日期"
            @change="dateChange"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select
            size="small"
            v-model="account_items.model_value"
            :placeholder="account_items.placeHolder"
            filterable
            @change="getCookie"
          >
            <el-option
              v-for="item in account_items.options"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <template v-if="randImgSrc">
          <el-form-item>
            <div
              v-html="randImgSrc"
              class="authcode"
            ></div>
          </el-form-item>
          <el-form-item>
            <el-input
              size="small"
              class="u-w150"
              v-model="randValue"
              placeholder="输入验证码"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click.stop="pageInfo"
              >
              </el-button>
            </el-input>
          </el-form-item>
        </template>
        <el-form-item>
          <el-button
            size="small"
            @click.stop="importData"
          >导出数据</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        :data="tableData"
        border
        stripe
      >
        <el-table-column
          align="center"
          v-for="(c, i) in table_column"
          :key="i"
          :fixed="c.fixed"
          :sortable="c.sortable"
          :prop="c.prop"
          :label="c.label"
          v-show="c.visible"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scope lang="scss">
.authcode {
  width: 150px;
  line-height: 0;
  position: relative;
  & :first-child {
    position: absolute;
    top: -15px;
  }
}
</style>

<script>
import "@/style/common.scss";
export default {
  data() {
    return {
      randImgSrc: "",
      randValue: "",
      cookie: "",
      checked: true,
      loading: false,
      visibleMenuSelectStatus: false,
      checkedCities: [
        "账号",
        "日期",
        "渠道号",
        "应用名称",
        "激活数",
        "留存率",
        "失败原因"
      ],
      cities: [
        "账号",
        "日期",
        "渠道号",
        "应用名称",
        "激活数",
        "留存率",
        "失败原因"
      ],
      citiesFilterVal: [
        "account",
        "date",
        "channel",
        "appName",
        "jihuo",
        "liucun",
        "failReason"
      ],
      table_column: [
        {
          fixed: false,
          prop: "account",
          label: "账号",
          sortable: false,
          visible: true
        },
        {
          fixed: false,
          prop: "date",
          label: "日期",
          sortable: true,
          visible: true
        },
        {
          fixed: false,
          prop: "channel",
          label: "渠道号",
          sortable: false,
          visible: true
        },
        {
          fixed: false,
          prop: "appName",
          label: "应用名称",
          sortable: false,
          visible: true
        },
        {
          fixed: false,
          prop: "jihuo",
          label: "激活数",
          sortable: false,
          visible: true
        },
        {
          fixed: false,
          prop: "liucun",
          label: "留存率",
          sortable: false,
          visible: true
        },
        {
          fixed: false,
          prop: "failReason",
          label: "失败原因",
          sortable: false,
          visible: true
        }
      ],
      menu_nav: ["CPA数据管理", "内容抓取"],
      account_items: {
        model_value: "",
        placeHolder: "账号",
        options: [
          "kydsp",
          "kydsp_dy",
          "kydsp_hs",
          "2345-ky",
          "aliyun_ky",
          "2345-dsp",
          "kydsp_ppx"
        ]
      },
      tableData: [],
      dateValue: new Date(new Date().getTime() - 1 * 24 * 60 * 60 * 1000),
      params: {
        type: "2",
        val: "",
        date: ""
      }
    };
  },
  computed: {
    paddingWidth() {
      return this.$store.state.paddingWidth;
    }
  },
  created() {
    this.dateChange();
  },
  methods: {
    /*获取cookie*/
    getCookie() {
      this.randValue = "";
      if (this.account_items.model_value != "") {
        this.$http({
          method: "get",
          url: this.apiUrl.importdataGetCookie
        })
          .then(res => {
            if (res.status == 200) {
              this.cookie = res.data;
              this.getRnd();
            }
          })
          .catch(err => {});
      }
    },
    /*获取验证码*/
    getRnd() {
      this.$http({
        method: "get",
        url: this.apiUrl.get_captcha,
        params: {
          cookie: this.cookie
        }
      })
        .then(res => {
          if (res.status == 200) {
            this.randImgSrc = res.data;
          }
        })
        .catch(err => {});
    },
    pageInfo() {
      if (this.loading) {
        this.$message({
          type: "info",
          message: "正在抓取数据中，请稍后再试"
        });
        return false;
      }
      if (this.params.date == "") {
        this.$message({
          type: "info",
          message: "请选择日期"
        });
        return false;
      } else if (this.account_items.model_value == "") {
        this.$message({
          type: "info",
          message: "请选择账户"
        });
        return false;
      } else if (this.randValue == "") {
        this.$message({
          type: "info",
          message: "请输入验证码"
        });
        return false;
      }
      this.loading = true;
      this.$http({
        method: "get",
        url: this.apiUrl.importdataStartFetch,
        params: {
          captcha: this.randValue,
          username: this.account_items.model_value,
          cookie: this.cookie,
          date: this.params.date
        }
      })
        .then(res => {
          this.loading = false;
          if (res.status == 200) {
            let data = res.data;
            if (data.status == "1") {
              this.$message({
                type: "info",
                message: "全部抓取成功"
              });
              this.tableData = [];
            } else if (data.status == "2") {
              let obj = eval("(" + data.msg + ")");
              obj.forEach((item, i) => {
                item.account = this.account_items.model_value;
              });
              this.tableData = obj;
            } else {
              this.$message({
                type: "error",
                message: data.msg
              });
              this.account_items.model_value = "";
              this.tableData = [];
            }
          }
        })
        .catch(err => {
          this.loading = false;
        });
    },
    checkedChange() {
      for (let item of this.table_column) {
        var index = this.checkedCities.indexOf(item.label);
        index >= 0 ? (item.visible = true) : (item.visible = false);
      }
    },
    changeCheckStatus(e) {
      e.stopPropagation();
      this.visibleMenuSelectStatus = !this.visibleMenuSelectStatus;
    },
    bodyEvent() {
      this.visibleMenuSelectStatus = false;
    },
    preventDefault(e) {
      e.stopPropagation();
    },
    importData() {
      if (this.tableData.length == 0) {
        this.$message({
          type: "info",
          message: "请抓取数据"
        });
        return false;
      }
      let tHeader = this.cities;
      let filterVal = this.citiesFilterVal;
      let importData = this.tableData;
      let fileName = [this.account_items.model_value].join("_");
      this.handleDownload(tHeader, filterVal, importData, fileName);
    },
    dateChange() {
      this.account_items.model_value = this.randValue = "";
      if (this.dateValue != "" && typeof this.dateValue != "undefined") {
        this.params.date = this.formatDateTime(this.dateValue, "y-m-d");
      } else {
        this.params.date = "";
      }
    }
  }
};
</script>
